<template>
  <commonPage :showHeader="true">
    <scroller
      slot="page_body"
      style="height: 100%"
      ref="my_scroller"
      :on-refresh="refresh"
      :on-infinite="infinite"
      refresh-layer-color="#4b8bf4"
      loading-layer-color="#ec4949"
      class="page_body"
    >
  
    <div class="all">

        <div class="top">
            <div class="top-l">
                <p>鹿城文明大脑督办系统</p>
            </div>
            <div class="top-r">
                <div class="touxiang">
                
                </div>
                <p>点位自查人</p>
            </div> 
        </div>
        <div class="middle">
            <div class="upload">
                <p>点此上传文件</p>
            </div>
            <div class="suggest">
                输入整改建议(选填)
            </div>
            <!-- <input type="text" placeholder="输入整改建议(选填)" class="suggest"> -->
            <div class="button">
                <div class="hege">合格</div>
                <div class="buhege">不合格</div>
                <!-- <van-button color="#1087de" >合格</van-button>
                <van-button color="#ff5548" >不合格</van-button> -->
            </div>
            <div class="when">
                <div><p><van-icon name="clock-o" />自查时间</p><p>2021-06-08 13:34</p></div>
            </div>
            <div class="where">
                <div><p><van-icon name="location-o" />自查地点</p><p>温州市黎明工业区</p></div>
            </div>
        </div>
        <div class="bottom">
            提交登记
        </div>
       

    </div>
     
    </scroller>
  </commonPage>
</template>
<script>
import commonPage from "../components/common/commonPage";
export default {
  name: "duban3",
  data() {
    return {
      
    };
  },
  created() {
    
  },
  components: {
    commonPage,
  },
  methods: {
    
    
  },

};
</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
}
.all{
  width: 100%;
  position: relative;   
}
.top{
  width: 92%;
  height: 2.75rem;
  display: flex;
  justify-content: space-between;
  background: white;
  line-height: 2.75rem;
  padding-left: 4%;
  padding-right: 4%;
}
.top-l{

}
.top-l > p{
  background-image: linear-gradient(#0063b3,#198de4,#57b1fd);
  -webkit-background-clip:text;
  color: transparent;

}
.top-r{
  display: flex;
}
.top-r > p{
  color: #7d8a93;
}
.touxiang{
  width: 1.2rem;
  height: 1.2rem;
  background: gray;
  border-radius: 6px;
  margin: auto 0.3rem;
}
.middle{
    padding: 1rem;
    background: #f5f5f5;
}
.upload{
    height: 11rem;
    background: white;
    text-align: center;
    border-radius: 5px;
    line-height: 11rem;
    color: #7d8a93;
}
.suggest{
    padding: 0.5rem;
    margin-top: 1rem;
    background: white;
    height: 8rem;
    border-radius: 5px;
    border: none;
    color: #7d8a93;
}
.button{
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
    height: 2.3rem;
}
.hege{
    width: 47%;
    background: #1087de;
    border-radius: 7px;
    color: white;
    font-size: 1.1rem;
    line-height: 2.3rem;
    text-align: center;
}
.buhege{
    width: 47%;
    background: #ff5548;
    border-radius: 7px;
    color: white;
    font-size: 1.1rem;
    line-height: 2.3rem;
    text-align: center;
}
.when{
    margin-top: 1rem;
    height: 2.3rem;
    background: white;
    color: #7d8a93;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    line-height: 2.3rem;
}
.when > div{
    display: flex;
    justify-content: space-between;
}
.van-icon::before{
    line-height: 2.3rem;
    margin-right: 0.2rem;
}

.where{
    margin-top: 1rem;
    height: 2.3rem;
    background: white;
    color: #7d8a93;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    line-height: 2.3rem;
}
.where > div{
    display: flex;
    justify-content: space-between;
}
.bottom{
    height: 2.5rem;
    background: #1087de;
    color: white;
    font-size: 1.4rem;
    line-height: 2.5rem;
    text-align: center;
}


</style>